import React, { createContext,Component, useContext } from 'react'
const Messaged=createContext('light')

// 取名的时候一定要是contextType 取值要context
// Consumer里面的格式是{}加上一个函数的返回值
// 两种提供数据方式 和四种获取数据方式
 class PPage3 extends Component {
  static contextType =Messaged;
  render() {
    return (
      <div>{this.context}</div>
    )
  }
}
class PPage31 extends Component {
  render() {
    return (
      <div>{this.context}</div>
    )
  }
}
class PPage311 extends Component {
  render() {
    return (
      <Messaged.Consumer>{(value)=>(<div>{value}</div>)}
      </Messaged.Consumer>
    )
  }
}
PPage31.contextType=Messaged

 function Page31() {
  const iu=useContext(Messaged)
  return (
    <div>{iu}</div>
  )
}

export default function Page3() {
  return (
    <div>
      <h2>useContext的使用没有Provider--static contextType =Messaged;</h2>
      <PPage3></PPage3>
    {/* 必须要有value值 */}
   <Messaged.Provider value='787'>
      <h2>useContext的使用Provider--static contextType =Messaged;</h2>
      <PPage3></PPage3>
     </Messaged.Provider>

     <h2>useContext的使用没有Provider--PPage31.contextType=Messaged</h2>
      <PPage31></PPage31>
   <Messaged.Provider value='787'>
      <h2>useContext的使用Provider--PPage31.contextType=Messaged</h2>
      <PPage31></PPage31>
     </Messaged.Provider>

     <h2>useContext的使用没有Provider--Consumer</h2>
      <PPage311></PPage311>
   <Messaged.Provider value='787'>
      <h2>useContext的使用Provider--Consumer</h2>
      <PPage311></PPage311>
     </Messaged.Provider>
     <h2>useContextHOOK的使用没有Provider</h2>
      <Page31></Page31>
   <Messaged.Provider value='787'>
      <h2>useContextHOOK的使用Provider</h2>
      <Page31></Page31>
     </Messaged.Provider>
    </div>
  )
}



